<template>
  <div class="app-container">
    <el-form :model="formData" ref="formDataRef" :rules="formDataRules" label-position="left">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="formData.name" placeholder="菜单名称" clearable style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <ActionButtons @reset="handleReset" @query="queryUserList">
            <el-button type="primary" size="small" @click="handleAddMenu">新增菜单</el-button>
          </ActionButtons>
        </el-col>
      </el-row>
    </el-form>
    <BaseTable :table-columns="tableColumns" :table-data="tableData" :options="tableOptions" :total="pages.total" :page-num="pages.pageNum" :page-size="pages.pageSize">
      <template v-slot:operation="{ row }">
        <el-button type="primary" text @click="handleTableItemEdit(row)">编辑</el-button>
        <el-button type="danger" text @click="handleTableItemDel(row)">删除</el-button>
      </template>
    </BaseTable>
    <Dialog ref="dialogRef" :title="dialogOptions.title" :width="dialogOptions.width" @close="handleDialogClose"
      @confirm="handleDialogConfirm"></Dialog>
  </div>
</template>
<script lang='ts' setup>
import { ref, reactive } from 'vue'
import FSMessage from '@/utils/message'
import type { FormInstance, FormRules } from 'element-plus'
import BaseTable from '@/components/BaseTable/index.vue'
import ActionButtons from '@/components/ActionButtons/index.vue'
import Dialog from '@/components/Dialog/index.vue'
import { IPaginationForm } from '@/types/http'
import { resetForm } from '@/utils/tools'
import useHooksTable from './useHooksTable'
import { getMenuListAllAPI, getMenuListChildrenAPI, updateMenuAPI, deleteMenuAPI, createMenuAPI } from '@/api/menu'
/* ------------------------------ variable ------------------------------ */
const formData = ref({
  name: ''
})
const dialogRef = ref()
const formDataRef = ref<FormInstance>()
const formDataRules = ref<FormRules>()
const pages = ref<IPaginationForm>({
  pageSize: 20,
  pageNum: 1,
  total: 0
})
const { tableColumns, tableData, tableOptions } = useHooksTable()
const dialogOptions = ref<any>({
  title: '新增菜单',
  openType: 0,
  width: '560px'
})
/* ------------------------------ function ------------------------------ */

const handleReset = () => {
  resetForm(formDataRef.value)
  queryUserList()
}

const queryUserList = async () => {
  try {
    const res = await getMenuListAllAPI({ ...pages.value, ...formData.value })
    res.data.list.forEach((item, index) => {
      // @ts-ignore
      item.index = index + 1 + (pages.value.pageNum - 1) * pages.value.pageSize
    })
    tableData.value = res.data.list
    FSMessage.success('请求成功')
  } catch (e) {
    console.log(e)
  }
}

const handleAddMenu = () => {
  dialogRef.value.visiableDialog()
}

const handleDialogClose = () => {
  console.log('关闭弹窗')
}

const handleDialogConfirm = () => {
  dialogRef.value.invisiableDialog()
}

const handleTableItemEdit = (row) => {
  console.log(row)
}

const handleTableItemDel = (row) => {
  console.log(row)
}
queryUserList()

</script>
<style scoped lang='less'></style>
